<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('客户报表') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('客户名称')" prop="name">
        <el-input
          v-model="queryParams.companyName"
          :placeholder="$t('组名称')"
          clearable
          @keyup.enter.native="init"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="init">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>
    <div v-loading="loading">
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="companyId"
        border
        :default-expand-all="false"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @cell-click="handleCell"
        @cell-mouse-leave="handleCellLeave"
      >
        <el-table-column prop="companyName" label="客户名称" sortable width="200" />
        <el-table-column prop="personChargeName" label="负责人" sortable width="180" />
        <el-table-column prop="dealStatus" label="状态" sortable width="100" />
        <el-table-column prop="remark" label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" type="textarea" :autosize="{ minRows: 5 }" size="mini" class="item__input" :placeholder="$t('请输入内容')" maxlength="2000" />
            <div class="item__txt">
              {{ scope.row.remark }}
              <i v-if="!isEmpty(scope.row.dealId)" class="el-icon-edit item__edits link-type" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listCompanyGroupTree, updateBaseRemark } from '@/api/company/group/companyBaseGroup.js'
export default {
  components: {},
  props: {},
  data() {
    return {
      // 遮盖层
      loading: false,
      tableData: [],
      queryParams: {
        companyName: ''
      },
      editProp: ['remark']
    }
  },
  watch: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      listCompanyGroupTree(this.queryParams).then(response => {
        this.tableData = response.data
        this.loading = false
      })
    },
    resetQuery() {
      this.queryParams.companyName = undefined
      this.init()
    },
    handleCell(row, column, cell) {
      // console.log(row, column, cell)
      const property = column.property
      if (this.editProp.includes(property) && !this.isEmpty(row.dealId)) {
        cell.querySelector('.item__input').style.display = 'block'
        cell.querySelector('.item__txt').style.display = 'none'
        cell.querySelector('.el-textarea__inner').focus()
      }
    },
    handleCellLeave(row, column, cell) {
      console.log(row, column, cell)
      const property = column.property
      if (this.editProp.includes(property) && !this.isEmpty(row.dealId)) {
        cell.querySelector('.item__input').style.display = 'none'
        cell.querySelector('.item__txt').style.display = 'block'
        updateBaseRemark(row).catch(() => {
          this.msgError(this.$t('修改失败'))
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .item__input {
  display: none;
  width: 100%;
}
/deep/ .item__txt {
  line-height: 20px;
}
.item__edits {
  cursor: pointer;
  border-color: transparent;
  background: transparent;
  padding-left: 0px;
  padding-right: 0px;
  display: flex;
  right: 10px;
  position: absolute;
  bottom: 10px;
}
</style>
